<template>
  <div class="content-main" :class="[`bg-${getDarkTheme?'black':'white'}`]">
    <BasicForm ref="formRef"
               @register="register"
               labelAlign="left"
               layout="false"
               @submit="handleSubmit"
               @reset="handleReset"
               style="margin-bottom: 10px"
               submitButtonText="确定"
               resetButtonText="取消"
               :showActionButtonGroup="false">
      <template #typeSlot="{ model, field }">
        <span>{{ !model[field] ? '原创' : '出版' }}</span>
      </template>
    </BasicForm>
  </div>
</template>

<script lang="ts" setup>
import {useForm} from '@/components/Form/src/hooks/useForm';
import {useTabsViewStore} from '@/store/modules/tabsView';
import {useDesignSetting} from "@/hooks/setting/useDesignSetting";

const route = useRoute();
const router = useRouter();
const { getDarkTheme } = useDesignSetting();
const useTab = useTabsViewStore();
const formRef = ref(null)
const schemas = [
  {
    field: 'resourceName',
    component: 'NInput',
    label: '书名',
    rules: [{required: true, message: '书名格式不正确', trigger: ['blur']}],
    componentProps: {
      placeholder: '请输入书名',
      maxlength: 50,
    },
  },
  {
    field: 'channel',
    component: 'NSelect',
    label: '频道',
    componentProps: {
      placeholder: '请选择频道',
      options: [
        {value: 1, label: '男频'},
        {value: 0, label: '女频'},
      ],
    },
  },
  {
    field: 'type',
    label: '类型',
    slot: 'typeSlot',
  }
];
const [register, {}] = useForm({
  gridProps: {cols: 3, xGap: 120, yGap: 30},
  labelWidth: 80,
  schemas: schemas || [],
});

function handleSubmit(values: Recordable) {
  console.log(values);
}

function handleReset(values: Recordable) {
  useTab.closeCurrentTab(route);
  router.back();
}

onMounted(() => {
  unref(formRef).formModel.type = route.params.pageType === 'Original' ? 0 : 1
})
</script>

<style scoped></style>
